<template>
  <view v-if="goodsDetail.goods_name" class="goods_detail">
    <!-- 轮播图 -->
    <view class="swiper">
      <uni-swiper-dot :info="info" :current="current" field="content" mode="round">
        <swiper class="swiper-box" :duration="1000" :circular="true" autoplay :interval="2000" @change="change">
          <swiper-item v-for="(item ,index) in info" :key="index">
            <image :src="item.pics_big" @click="preview(index)"></image>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>
    <!-- 商品详细介绍 -->
    <view class="detail">
      <text class="price">￥{{goodsDetail.goods_price}}</text>
      <view class="center">
        <view class="title">{{goodsDetail.goods_name}}</view>
        <view class="Favorite">
          <uni-icons type="star" size="22"></uni-icons>
          <text>收藏</text>
        </view>
      </view>
      <text class="delivery">快递：免运费</text>
    </view>
    <rich-text :nodes="goodsDetail.goods_introduce"></rich-text>
    <!-- 底部导航 -->
    <view class="goods_nav">
      <uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick" @buttonClick="buttonClick"/>
    </view>
  </view>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'
  export default {
    computed: { ...mapState('m_cart', ['cartCount']) },
    watch: {
      cartCount: {
        handler(newValue){
          this.options[1].info = newValue
        },
        immediate: true
      }
    },
    data() {
      return {
        info: [],
        current: 0,
        goodsDetail: {},
        options: [{
        					icon: 'shop',
        					text: '店铺',
                  }, {
        					icon: 'cart',
        					text: '购物车',
        					info: 0,
        					infoBackgroundColor: '#f00000',
        					infoColor: "#f5f5f5"
        }],
        customButtonGroup: [{
      						text: '加入购物车',
      						backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
      						color: '#fff'
      					},
      					{
      						text: '立即购买',
      						backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
      						color: '#fff'
      	}]
      	}
    },
    onLoad(options) {
      const goods_id = options.goods_id
      this.getGoodsDetail(goods_id)
    },
    methods: {
      ...mapMutations('m_cart', ['addCart']),
      change(e) {
        this.current = e.detail.current;
      },
      async getGoodsDetail(goods_id){
        const { data: { message } } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id })
        message.goods_introduce = message.goods_introduce.replace(/<img /g, '<img style="display: block;"')
        this.goodsDetail = message
        this.info = message.pics
      },
      preview(index){
        uni.previewImage({
          current: index,
          urls: this.info.map(x => x.pics_big)
        })
      },
      onClick(e) {
        if(e.content.text === '店铺'){
          uni.switchTab({
            url: '/pages/home/home'
          })
          }else{
            uni.switchTab({
              url: '/pages/cart/cart'
            })
        }
      },
      buttonClick(e) {
        if(e.content.text === '加入购物车'){
          const goods = {
            goods_id: this.goodsDetail.goods_id,
            goods_name: this.goodsDetail.goods_name,
            goods_price: this.goodsDetail.goods_price,
            goods_count: 1,
            goods_small_logo: this.goodsDetail.goods_small_logo,
            goods_state: true
          }
          this.addCart(goods)
        }else{
          uni.showToast({
            title: e.content.text
          })
        }
      }
  },
  }
</script>

<style lang="scss">
  .goods_detail {
    padding-bottom: 100rpx;
    .swiper-box {
      height: 750rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .detail {
      padding: 20rpx 10rpx;
      .price {
        font-size: 32rpx;
        color: #ffbd27;
      }
      .center {
        margin-top: 20rpx;
        display: flex;
        justify-content: space-between;
        .title {
          margin-right: 20rpx;
          font-size: 26rpx;
        }
        .Favorite {
          width: 200rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          font-size: 24rpx;
          color: gray;
          border-left: 2rpx solid #efefef;
        }
      }
      .delivery {
        font-size: 24rpx;
        color: gray
      }
    }
    .goods_nav {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
    }
  }
</style>
